<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.js"></script>
    <script>
        $(function() {
            $('#popup1').qrcode({
                render: 'canvas',
                width: 150,
                height: 150,
                text: window.location.href,
            });
            // $('.ui-icon-carat-l').on('click', function() {
            //     history.back();
            // })
        })
    </script>
</head>

<body>
    <div data-role="page">
        <div data-role="header" data-theme="b">
            <a class="ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext ui-btn-icon-left">返回</a>
            <h2>商品详情</h2>
            <a href="#popup1" data-rel="popup" class="ui-btn ui-btn-right ui-icon-camera ui-btn-icon-left" data-position-to="window" data-transition="flip">扫码</a>
            <div data-role="popup" id="popup1" class="ui-content">
                <a href="javascript:;" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>
            </div>
        </div>

        <div data-role="main" class="ui-content" data-inset="true" style="text-align: center;">
            <img src="css/images/meizu_mx4pro.jpg" class="ui-corner-all ui-shadow" style="max-width:100%;height:auto">
            <h3>meizu MX4pro</h3>
            <p>商品介绍</p>
        </div>

        <div data-role="footer" data-position="fixed" data-theme="b">
            <div data-role="navbar">
                <ul>
                    <li>
                        <a href="#pageone" data-icon="home" data-transition="none" class="ui-btn-active ui-state-persist">首页</a>
                    </li>
                    <li>
                        <a href="#pagetwo" data-icon="comment" data-transition="none">资讯</a>
                    </li>
                    <li>
                        <a href="#pagethree" data-icon="shop" data-transition="none">购物车</a>
                    </li>
                    <li>
                        <a href="#pagefour" data-icon="user" data-transition="none">我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>